<template>
	<div class="avue-sidebar">
		<!-- <div class="avue-sidebar" :style="{ background: theme }"> -->
		<logo />
		<el-scrollbar style="height: 100%">
			<div v-if="validatenull(menu)" class="avue-sidebar--tip">没有发现菜单</div>
			<el-menu class="madp-submenu" :default-active="nowTagValue" :show-timeout="200" :collapse="keyCollapse" unique-opened mode="vertical">
				<sidebar-item :menu="menu" :screen="screen" :props="website.menu.props" :collapse="keyCollapse" first />
			</el-menu>
		</el-scrollbar>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import logo from '../logo';
import sidebarItem from './sidebarItem';
export default {
	name: 'Sidebar',
	inject: ['Index'],
	components: { sidebarItem, logo },
	created() {
		this.Index.openMenu();
	},
	computed: {
		...mapGetters(['website', 'menu', 'tag', 'keyCollapse', 'screen', 'theme']),
		nowTagValue: function() {
			return this.$router.$avueRouter.getValue(this.$route);
		},
	},
};
</script>
<style scoped lang="scss">
/deep/ .el-scrollbar__thumb {
	display: none;
}
</style>
